<template>
    <div class="content">
        <van-row>
            <van-col span="2">
                <van-icon name="bars" size="30px" style="margin-left: 5px; margin-top: 5px;" />
            </van-col>
            <van-col span="20">
                <van-search v-model="keyword" shape="round" background="#cbcaca" placeholder="请输入搜索关键词"
                    @search="onSearch" />

            </van-col>
            <van-col span="2">
                <van-icon name="friends" size="30px" style="margin-top: 5px;" />
            </van-col>
        </van-row>
        <!--轮播图-->
        <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="image in images" :key="image">
                <img :src="image" width="100%" height="240px" />
            </van-swipe-item>
        </van-swipe>
        <van-notice-bar left-icon="volume-o" text="无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。"
            style="background-color:#cbcaca ; height: 15px;" />
        <!--icon 快捷入口-->
        <div class="iconitem">
            <van-swipe class="my-swipe" indicator-color="white">
                <van-swipe-item>
                    <van-grid :column-num="5" icon-size="40px" :border="false">
                        <van-grid-item v-for="value in iconimages" :key="value.id" :icon="value.img"
                            :text="value.text" />
                    </van-grid>
                </van-swipe-item>

                <van-swipe-item>
                    <van-grid :column-num="5" icon-size="40px" :border="false">
                        <van-grid-item v-for="value in iconimages2" :key="value.id" :icon="value.img"
                            :text="value.text" />
                    </van-grid>
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="iconitems">
            <!--分成两部分-->
            <van-row>
                <van-col span="5">
                    <div style="margin: 10px 10px;">
                        <div>秒杀活动</div>
                        <div>限时抢购</div><br>
                        <div>去抢购</div>
                    </div>

                </van-col>
                <van-col span="19">
                    <div class="productMS">
                        <van-grid :column-num="4" icon-size="40px" :border="false">
                            <van-grid-item v-for="value in productMSD" :key="value.id" :icon="value.img"
                                :text="value.price" />
                        </van-grid>
                    </div>

                </van-col>

            </van-row>
        </div>
        <hr>
        <div style="background-color: white;">
            <van-grid :column-num="2" style="margin-bottom: 60px;">
                <van-grid-item v-for="item in 2" style="margin-bottom: 60px;">
                    <van-image width="100%" height="100%" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
                    <div>欧舒丹沐浴露【新品上市】樱花250ml沐浴啫喱清洁滋润保湿留香母亲节</div>
                    <p style="color: red; margin-left: -120px;">￥<em style="font-size: 20px;">9888.00</em></p>
                </van-grid-item>
            </van-grid>

        </div>
    </div>




    <van-tabbar v-model="active">
        <van-tabbar-item icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item icon="cluster-o">分类</van-tabbar-item>
        <van-tabbar-item icon="friends-o">购物车</van-tabbar-item>
        <van-tabbar-item icon="setting-o">设置</van-tabbar-item>
    </van-tabbar>

</template>

<script setup>
import { onMounted, ref } from 'vue'
const active = ref(0)
const keyword = ref('')
const images = [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
];
//快捷入口的图片
const iconimages = ref([
    { id: 101, img: "https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png", text: '华杉超市' },
    { id: 102, img: "https://m.360buyimg.com/babel/jfs/t20270715/237082/37/21845/7616/6694edddFc764124a/38d00b686257b0f4.png", text: '手机通讯' },
    { id: 103, img: "https://m.360buyimg.com/babel/jfs/t20270715/237082/37/21845/7616/6694edddFc764124a/38d00b686257b0f4.png", text: '服饰美妆' },
    { id: 104, img: "https://m.360buyimg.com/babel/jfs/t20270715/237082/37/21845/7616/6694edddFc764124a/38d00b686257b0f4.png", text: '充值中心' },
    { id: 105, img: "https://m.360buyimg.com/babel/jfs/t20270715/237082/37/21845/7616/6694edddFc764124a/38d00b686257b0f4.png", text: 'PLUS会员' },

])
const iconimages2 = ref([
    { id: 101, img: "https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png", text: '华杉国际' },
    { id: 102, img: "https://m.360buyimg.com/babel/jfs/t20270715/237082/37/21845/7616/6694edddFc764124a/38d00b686257b0f4.png", text: '众筹' },
    { id: 103, img: "https://m.360buyimg.com/babel/jfs/t20270715/237082/37/21845/7616/6694edddFc764124a/38d00b686257b0f4.png", text: '服饰美妆' },
    { id: 104, img: "https://m.360buyimg.com/babel/jfs/t20270715/237082/37/21845/7616/6694edddFc764124a/38d00b686257b0f4.png", text: '充值中心' },
    { id: 105, img: "https://m.360buyimg.com/babel/jfs/t20270715/237082/37/21845/7616/6694edddFc764124a/38d00b686257b0f4.png", text: 'PLUS会员' },

])

const productMSD = ref([
    { id: 111, img: 'https://m.360buyimg.com/seckillcms/jfs/t1/187475/14/42986/117509/661f6a8bF0dbea173/681f767d1a7edcff.jpg', price: '￥'+'1288' },
    { id: 112, img: 'https://m.360buyimg.com/seckillcms/jfs/t1/187475/14/42986/117509/661f6a8bF0dbea173/681f767d1a7edcff.jpg', price: '￥' + '888' },
    { id: 113, img: 'https://m.360buyimg.com/seckillcms/jfs/t1/187475/14/42986/117509/661f6a8bF0dbea173/681f767d1a7edcff.jpg', price: '￥' + '988' },
    { id: 114, img: 'https://m.360buyimg.com/seckillcms/jfs/t1/187475/14/42986/117509/661f6a8bF0dbea173/681f767d1a7edcff.jpg', price: '￥' + '1088' },
])

const onSearch = (val) => { 
    console.log(val);
    keyword.value = val
    console.log(keyword.value);
    
    
}


</script>

<style  scoped>
.content{
    height: 100vh;
    width: 100%;
    background-color: #cbcaca;

}
.van-search{
    height: 40px;
}
.iconitem{
    width: 98%;
    height: 98px;
    background-color: white;
    margin-left: 5px;
    border-radius: 8px;
    margin-bottom: 10px;
    :deep(.van-grid-item__content) {
            opacity: 0.7;
            /* 透明度为60% */
        }
}
.iconitems {
    width: 98%;
    height: 100px;
    background-color: rgb(174, 12, 12);
    margin-left: 5px;
    border-radius: 8px;
    margin-bottom: 10px;
}


.productMS{
    width: 99%;
    height: 100px;
    background-color: white;
    border-radius: 8px;
    margin-top: 1px;
    margin-left: 1px;

    :deep(span){
        color: red;
        font-weight: 800;
    }
    :deep(.van-grid-item__content){
        border-radius: 8px;
    }
}
</style>
<style>


</style>
